<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/手敲轮播图.css">
    <link rel="stylesheet" href="css/xxk.css">
    <link rel="stylesheet" href="css/list.css">
    <title>list商品列表</title>
</head>
<body>
     <!-- 顶部提醒 -->
     <div class="caution">
       
    </div>
    <!-- 登录注册 -->
    <div class="topBar">
       
    </div>
    <!-- logo行 -->
    <div class="searchBar">
        
    </div>
    <!-- 导航栏 -->
    <div class="nav">
       

    </div>

    <!-- 详情页页面 -->
    <div class="xxl-box">
        <div class="xxl">
            <div class="xxl-i"><a href="#"><img src="http://image31.bookschina.com/pro-images/210721fd/1200100.jpg?id=15" alt=""></a></div>

            <div class="crumbsNav">
                <ul>
                    <span class="crumbsNav-s1"><a href="#">中图网</a></span>
                    <span ></span>&gt;</span>
                    <span class="crumbsNav-s3"><a href="#">全部分类</a></span>
                    <span >&gt;</span>
                    <span class="crumbsNav-s5">小说<span class="iconfont crumbsNav-s6">&#xe61c;</span></span>
                </ul>

            </div>

            <div class="selectorBar">
                <div class="selectorBar-1">
                    <div class="selectorBar-1x">
                        <div class="selectorBar-1x-left">分类</div>
                        <div class="selectorBar-1x-center">
                            <ul>
                                <li><a href="#">社会</a></li>
                                <li><a href="#">情感</a></li>
                                <li><a href="#">侦探/悬疑/推理</a></li>
                                <li><a href="#">作品</a></li>
                                <li><a href="#">世界名著</a></li>
                                <li><a href="#">中国当代小说</a></li>
                                <li><a href="#">历史</a></li>
                                <li><a href="#">外国小说</a></li>
                                <li><a href="#">科幻</a></li>
                                <li><a href="#">中国古典小说</a></li>
                                <li><a href="#">四大名著</a></li>
                                <li><a href="#">军事</a></li>
                                <li><a href="#">惊悚/恐怖</a></li>
                                <li><a href="#">魔幻</a></li>
                                <li><a href="#">中国近现代小说</a></li>
                                <li><a href="#">官场</a></li>
                                <li><a href="#">武侠</a></li>
                                <li><a href="#">影视小说</a></li>
                                <li><a href="#">都市</a></li>
                                <li><a href="#">职场</a></li>
                                <li><a href="#">财经</a></li>
                                <li><a href="#">乡土</a></li>
                                <li><a href="#">港澳台小说</a></li>
                            </ul>
                        </div>
                        <div class="selectorBar-1x-right">
                            展开<span class="iconfont">&#xe61c;</span>
                        </div>
                    </div>
                </div>
                <div class="selectorBar-2">
                    <div class="selectorBar-2-left">出版社:</div>
                    <div class="selectorBar-2-center">
                        <ul>
                            <li>人民文学出版社</li>
                            <li>作家出版社</li>
                            <li>北京联合出版公司</li>
                            <li>上海文艺出版社</li>
                            <li>新星出版社</li>
                            <li>百花洲文艺出版社</li>
                        </ul>
                    </div>
                    <div class="selectorBar-2-right">
                        <div>
                            展开<span class="iconfont">&#xe61c;</span>
                        </div>
                    </div>

                </div>

                <div class="selectorBar-2">
                    <div class="selectorBar-2-left">售价:</div>
                    <div class="selectorBar-2-center">
                        <ul>
                            <li>0-5元</li>
                            <li>5-10元</li>
                            <li>10-20元</li>
                            <li>20-50元</li>
                            <li>50-100元</li>
                            <li>100元以上</li>
                        </ul>
                        <div class="ipt">
                            ￥<input type="text"><s>&nbsp;&nbsp;&nbsp;</s> ￥<input type="text"><span>确定</span>
                        </div>
                    </div>
                   

                </div>

                <div class="selectorBar-2">
                    <div class="selectorBar-2-left">折扣:</div>
                    <div class="selectorBar-2-center">
                        <ul>
                            <li>3折以下</li>
                            <li>3-4折</li>
                            <li>4-5折</li>
                            <li>5-7折</li>
                            <li>7折</li>
                        </ul>
                    </div>
                </div>




            </div>

            <div class="sortBar">
                <div class="sortBar-left">
                    <ul>
                        <li class="clr">销量</li>
                        <li>出版时间</li>
                        <li>定价</li>
                        <li>折扣</li>
                        <li>售价</li>
                        <li>上架时间</li>
                    </ul>
                </div>
                <div class="sortBar-center">
                    <p class="sortBar-center-s1"></p><span class="sortBar-center-s2">只看5折以下图书</span>
                </div>
                <div class="sortBar-right"></div>
            </div>

            <div class="container">
                <div class="container-left">
                    <ul class="container-left-u">
                        
                        <!-- <li class="container-left-l">
                            <div class="container-left-l-d1"><a href="#"><img src="http://image12.bookschina.com/2020/20200906/2/s8302995.jpg" alt="" class="container-left-l-d1-i"></a></div>
                            <div class="container-left-l-d2">
                                <div class="container-left-l-d2-d1">
                                    <span class="container-left-l-d2-d1-s1">￥9.0</span><span class="container-left-l-d2-d1-s2">(2.5折)</span><s class="container-left-l-d2-d1-s3">￥36.0</s>
                                </div>
                                <P class="container-left-l-d2-p1">罗生门</P>
                                <p class="container-left-l-d2-p2"><a href="#">[日]芥川龙之介 著 </a> / <a href="#"> 北京联合出版公</a></p>
                                <p class="container-left-l-d2-p3">19.9封顶 8本8折</p>
                                <div class="container-left-l-d2-d2"><span class="container-left-l-d2-d2-s1">加入购物车</span><span class="container-left-l-d2-d2-s2">收藏</span></div>
                            </div>
                        </li> -->



                    </ul>
                </div>
                <div class="container-right">
                    <div class="container-right-top">本类畅销</div>
                    <div class="container-right-bottom">
                        <ul class="container-right-bottom-u">
                            <li class="container-right-bottom-l">
                                <div class="container-right-bottom-l-t"><a href="#"><img src="http://image12.bookschina.com/2020/20200906/2/s8303038.jpg" alt="" id="container-right-bottom-l-i"></a></div>
                                
                                <div class="container-right-bottom-l-b">
                                    <div class="container-right-bottom-l-b-d1"><a href="#" id="container-right-bottom-l-b-d1-a">我是猫</a></div>
                                    <span id="container-right-bottom-l-b-s">[日] 夏目漱石 著，孙静 译</span>
                                    <div class="container-right-bottom-l-b-d2">
                                        <span id="container-right-bottom-l-b-d2-s1">￥17.9</span><s id="container-right-bottom-l-b-d2-s2">￥46</s>
                                    </div>
                                </div>
                            </li>
                            <li class="container-right-bottom-l">
                                <div class="container-right-bottom-l-t"><a href="#"><img src="http://image12.bookschina.com/2020/20200906/2/s8303038.jpg" alt="" id="container-right-bottom-l-i"></a></div>

                                <div class="container-right-bottom-l-b">
                                    <div class="container-right-bottom-l-b-d1"><a href="#" id="container-right-bottom-l-b-d1-a">我是猫</a></div>
                                    <span id="container-right-bottom-l-b-s">[日] 夏目漱石 著，孙静 译</span>
                                    <div class="container-right-bottom-l-b-d2">
                                        <span id="container-right-bottom-l-b-d2-s1">￥17.9</span><s id="container-right-bottom-l-b-d2-s2">￥46</s>
                                    </div>
                                </div>
                            </li>
                            <li class="container-right-bottom-l">
                                <div class="container-right-bottom-l-t"><a href="#"><img src="http://image12.bookschina.com/2020/20200906/2/s8303038.jpg" alt="" id="container-right-bottom-l-i"></a></div>

                                <div class="container-right-bottom-l-b">
                                    <div class="container-right-bottom-l-b-d1"><a href="#" id="container-right-bottom-l-b-d1-a">我是猫</a></div>
                                    <span id="container-right-bottom-l-b-s">[日] 夏目漱石 著，孙静 译</span>
                                    <div class="container-right-bottom-l-b-d2">
                                        <span id="container-right-bottom-l-b-d2-s1">￥17.9</span><s id="container-right-bottom-l-b-d2-s2">￥46</s>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <!-- --------底部-------- -->
    <div class="bottom-box">
         
    </div>
    
</body>
<script src="./libs/require.js" data-main="./js/list.js"></script>
</html>
<!-- <script src="./libs/cookie.js"></script>  -->
<!-- <script src="./libs/ajax.js"></script>-->
<!-- <script>
   class List{
        constructor(){
            this.cont = document.querySelector(".container-left-u");
            this.url = "http://localhost:3000/data/goods.json";
            this.load();

            // 1. 绑定按钮的点击事件
            this.addEvent()
        }
        load(){
            ajax({
                url:this.url,
                success:(res)=>{
                    this.res = JSON.parse(res).msg;
                    // console.log(JSON.parse(res).msg);
                    this.render();
                }
            })
        }
        render(){
            // console.log(this.res)
            //取消页面跳转
            // <a href="javascript:;">

            let str = "";
            for(let i=0;i<this.res.length;i++){
                str += `<li class="container-left-l" index="${this.res[i].proId}">
                            <div class="container-left-l-d1"><a href="details.html" target="_blank" class="container-left-l-d1-a"><img src="${this.res[i].urlImg}" alt="" class="container-left-l-d1-i"></a></div>
                            <div class="container-left-l-d2">
                                <div class="container-left-l-d2-d1">
                                    <span class="container-left-l-d2-d1-s1">${this.res[i].cPrice}</span><span class="container-left-l-d2-d1-s2">${this.res[i].discount}</span><s class="container-left-l-d2-d1-s3">${this.res[i].oPrice}</s>
                                </div>
                                <P class="container-left-l-d2-p1">${this.res[i].bookName}</P>
                                <p class="container-left-l-d2-p2"><a href="#"> ${this.res[i].author} </a> / <a href="#"> ${this.res[i].publish} </a></p>
                                <div class="container-left-l-d2-d2"><span class="container-left-l-d2-d2-s1">加入购物车</span><span class="container-left-l-d2-d2-s2">收藏</span></div>
                            </div>
                        </li>`
            }
            this.cont.innerHTML = str;
        }
        addEvent(){
            const that = this;
            this.cont.addEventListener("click",function(eve){
                const e = eve || window.event;
                const tar = e.target || e.srcElement;

                if(tar.className === "container-left-l-d2-d2-s1"){
                    console.log("购物车");
                    that.id = tar.parentNode.parentNode.parentNode.getAttribute("index")
                    that.setCookie();
                }
                if(tar.className === "container-left-l-d1-i"){
                    that.id = tar.parentNode.parentNode.parentNode.getAttribute("index")
                    console.log(that.id);

                    that.setCookie1();
                }
            })
        }
        setCookie(){
            // 0. 假设数据的存储格式
            // [{id:"u143rufg",num:1},{},{},...]
    
            // 1. 先读数据
            this.goodsMsg = localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];
            // console.log(this.goodsMsg)
            if(this.goodsMsg.length < 1){
                // 2. 第一次存，直接存
                this.goodsMsg.push({
                    id:this.id,
                    num:1
                })
            }else{
                // 3. 不是第一次存，需要先读，读到数据之后
                // 4. 判断是否有重复数据
                let i=0;
                const flag = this.goodsMsg.some((val,idx)=>{
                    i = idx;
                    return val.id === this.id
                })
                if(flag){
                    // 5. 有，数量+1
                    this.goodsMsg[i].num++
                }else{
                    // 6. 没有，新增
                    this.goodsMsg.push({
                        id:this.id,
                        num:1
                    })
                }
            }
            // 7. 存回本地存储
            localStorage.setItem("goodsMsg", JSON.stringify(this.goodsMsg));
        }

        setCookie1(){
            // 0. 假设数据的存储格式
            // [{id:"u143rufg",num:1},{},{},...]
    
            // 1. 先读数据
            this.goodsMsg = getCookie("goodsMsg") ? JSON.parse(getCookie("goodsMsg")) : [];
            // console.log(this.goodsMsg)
                // 2. 第一次存，直接存
                this.goodsMsg.push({
                    id:this.id,
                })
                // 3. 不是第一次存，需要先读，读到数据之后
                // 4. 判断是否有重复数据
                    // 5. 有，数量+1
            // 7. 存回本地存储
            setCookie("goodsMsg", JSON.stringify(this.goodsMsg));
        }



    }

    new List;

</script> -->


<script src="./libs/jquery.js"></script>
<script>

    // 顶部提醒
    $(".caution").load("http://localhost:3000/public/public_index.html .cautionioc")


    // 开始动画
    $(".imgTop").load("http://localhost:3000/public/public_index.html .imgTop-box",function(){
        setTimeout(function(){
            console.log("这是三秒以后");
            $(".imgTop-box").animate({
                height : 100,
            }, 1000);
            $(".i1").animate({
                opacity: 'show'
            }, 1000);
            $(".i2").animate({
                height : 100, opacity: 'hide'
            }, 1000);
        },3000)
    })

    // 登录注册
    $(".topBar").load("http://localhost:3000/public/public_index.html .zhuce",function(){
        const zhanghu = document.getElementById("zhanghu");
        const zhul = document.querySelector(".zhul");
        zhanghu.onmouseenter = function(){
            console.log("yiru");
            zhul.style.display = "block";
            zhanghu.style.background = "#fff"
            zhanghu.style.border = "1px solid black"
            zhanghu.style.borderBottom = "none"
            zhanghu.style.borderTop = "none"
        }
        zhanghu.onmouseleave = function(){
            console.log("yichu");
            zhul.style.display = "none";
            zhanghu.style.background = "#f2f2f2"
            zhanghu.style.border = "none"
        }
        zhul.onmouseenter = function(){
            console.log("yiru");
            zhul.style.display = "block";
            zhanghu.style.background = "#fff"
            zhanghu.style.border = "1px solid black"
            zhanghu.style.borderBottom = "none"
            zhanghu.style.borderTop = "none"
        }
        zhul.onmouseleave = function(){
            console.log("yichu");
            zhul.style.display = "none";
            zhanghu.style.background = "#f2f2f2"
            zhanghu.style.border = "none"
        }

        //-------以下为登录注册行新加js

        if(localStorage.getItem("token") === "ok"){
            $(".loginArea").hide();
            $(".loginArea1").show().children("span").html(localStorage.getItem("uname"))
        }else{
            $(".loginArea1").hide();
            $(".loginArea").show();
        }

        $(".loginArea1-s2").click(function(){
            $(".loginArea1").hide();
            $(".loginArea").show();
            localStorage.setItem("token","no")
        })

        $(".zhanghu").click(function(){
            if(localStorage.getItem("token") === "ok"){
                $(".loginArea").hide();
                $(".loginArea1").show().children("span").html(localStorage.getItem("uname"))
            }else{
                if(confirm("您还未登录，是否前往登录？")){
                    location.href="./logon.html"
                }
                return false;
            }
        })






    })

    // logo行
    $(".searchBar").load("http://localhost:3000/public/public_index.html .searchBarFixed",function(){
        const otxt = document.getElementById("search");
        const obtn = document.querySelector(".s4");
        const oul = document.querySelector(".list");

        // 点击按钮，跳转到真实的百度搜索
        obtn.onclick = function(){
            location.href = "https://www.baidu.com/s?wd=" + otxt.value;
        }

        otxt.oninput = function(){
            
            // 判断输入框是否为空，为空，清除下拉菜单
            if(this.value === "") oul.innerHTML = "";
            oul.style.display = "block"
            // console.log(this.value)
            // 开启jsonp请求，请求百度数据
            jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",function  (res){
                // 请求成功后，处理数据
                // console.log(res.s);
                let str = "";
                // 拼接页面结构
                for(let i=0;i<res.s.length;i++){
                    str += `<li>${res.s[i]}</li>`
                }
                // 渲染页面
                // console.log(str)
                oul.innerHTML = str;
            
            
                oul.onmouseover = function(eve){
                    const e = eve?eve:window.event;
                    const tag = e.target || ev.srcElement;
                    // console.log(tag.nodeName);
                    if(tag.nodeName == "LI"){
                        tag.style.color = "red";
                        // console.log(tag.innerHTML);
                        tag.onclick = function(){
                            otxt.value = tag.innerHTML;
                            oul.style.display="none";
                        }
                    }
                }
                oul.onmouseout = function(eve){
                    const e = eve?eve:window.event;
                    const tag = e.target || ev.srcElement;
                    // console.log(tag.nodeName);
                    if(tag.nodeName == "LI"){
                        tag.style.color = "black";
                    }
                }
            },{
                wd:this.value,
                cb:"ajshdfgausdf",
                selfName:"cb"
            })
        }
        function jsonp(url,cb,data){
            let str = "";
            for(let i in data){
                str += `${i}=${data[i]}&`
            }
            url += "?" + str + "_qft_=" + Date.now();
            const script = document.createElement("script");
            script.src = url;
            document.body.appendChild(script);
            window[data[data.selfName]] = function(res){
            cb(res);
        }
        }
    })
        
    //导航栏
    $(".nav").load("http://localhost:3000/public/public_index.html .nav1")

    //底部
    $(".bottom-box").load("http://localhost:3000/public/public_index.html .bottom")


</script>
